<div class="btn-group">
  <button class="btn btn-primary" (click)="showImage = !showImage">
    Toggle Image
  </button>
  <button class="btn btn-error" (click)="buttonAtStart = !buttonAtStart">
    Toggle Button
  </button>
  <button class="btn btn-warning" (click)="showCounter = !showCounter">
    Toggle Counter
  </button>
</div>

<div class="divider"></div>

<div class="card card-compact w-96 bg-base-100 shadow-xl">
  <figure>
    <ng-content *ngIf="showImage" select="img"></ng-content>
  </figure>
  <div class="card-body">
    <ng-content select="h2"></ng-content>

    <ng-container *ngIf="showCounter">
      <!-- <app-counter /> -->
      <ng-content select="app-counter"></ng-content>
    </ng-container>

    <p>If a dog chews shoes whose shoes does he choose?</p>

    <div class="card-actions justify-start">
      <ng-container
        *ngIf="buttonAtStart"
        [ngTemplateOutlet]="content.templateRef"
      ></ng-container>
    </div>
    <div class="card-actions justify-end">
      <ng-container
        *ngIf="!buttonAtStart"
        [ngTemplateOutlet]="content.templateRef"
      ></ng-container>
    </div>
  </div>
</div>
